<template>
  <div>
    <my-header></my-header>
    <h1>{{ this.newsss.newsTitle }}</h1>
    <div class="box">

      <p style="line-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;{{ this.newsss.newsNeirong }}</p>
    </div>
    <br>
    <div>
      <ul>
        <li class="feed">
          <div class="avatar">
            <img
              src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/06/08/ChMkJlZXu1KIeXzYAANm47tKrd4AAFZagEV0JkAA2b7289.jpg"

              alt=""
            />
          </div>
          <br>
          <!--第一层循环start-->
          <div class="box1" v-for="item in cmt" :key="item">

            <p class="current">
              <a href="">昵称:{{ item.id }}</a>
              <br>
            <p>评论内容:&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</p>
            <p>
              {{ item.content }}
            </p>


            <p class="info">
              <span><a href="">举报不友好评论</a></span>
              <br>
              <span><a href="">回复</a></span>
              <strong>{{ item.createTime }}</strong>
              通过QQ空间
            </p>
            <p class="line"></p>
            <!--第二层循环start-->
            <br>
            <div class="box2"  v-for="v in item.children" :key="v">
              <div class="avatar">
                <img
                  src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJlbKwd2IcwQkAAdFYmuZX1gAALGfAJ_8p0AB0V6585.jpg"
                  alt=""
                />
              </div>
              <div class="box2_comments" >
                <p class="say">
                  <a href="">昵称:{{ v.createBy }}</a>
                <p>回复了&emsp;{{v.toCommentUserId}}&emsp;号小朋友:</p>
                {{ v.content }}

                <p>
                  <strong>{{v.createTime}}</strong>

                  <a href="">举报!</a>

                </p>
                <!--第三层循环start-->

                <!--第三层循环end-->
              </div>
              <div class="clear"></div>
            </div>

            <!--第二层循环end-->
            <p class="line"></p>

            <div id="app1">
            <input type="text" v-model="value1" />
              <button type="button" @click ="afterClick()" id="btn" value="">点击</button>

              <p>{{value1}}</p>

            </div>




              </div>

          <!--第一层循环end-->
          <div class="clear"></div>
        </li>
      </ul>
    </div>

  </div>


</template>
<script>
  export default {
    name: "news",
    data() {
      return {
        newsss: [],
        cmt: [],
        cms: [],
        value1:""
      };
    },
    methods: {
      afterClick(){
        this.$axios
          .get("/api/comment/insertComment/" + this.value1)
          .then((res) => {
            /*console.log(res.data.data);
            this.newsss = res.data.data;*/
            alert("你回复成功啦");
          });
      }

    }, created() {
      this.$axios
        .post("/api/new/findNewById?id=" + this.$route.params.id)
        .then((res) => {
          console.log(res.data.data);
          this.newsss = res.data.data;
        });
      this.$axios
        .get("/api/comment/findIdAndArticleId/1/4/" + this.$route.params.id)
        .then((res) => {
          console.log(res.data.data);
          this.cmt = res.data.data;
          for (const key in this.cmt) {
            console.log("this.cmt[key]", this.cmt[key].content);
          }
        });
    },
  };
</script>
<style scoped>
  * {
    box-sizing: border-box;
  }
  .box {
    width: 800px;
    max-height: 9999px;
    border: 1px solid gainsboro;
    margin: auto;
    margin-top: 20px;
    padding: 5px;

  }
  .boxs {
    padding: 5px;
    margin: auto;
    width: 800px;
    max-height: 2400px;
    border: 1px solid aqua;
  }
  .content {
    width: 600px;
    max-height: 2080px;
    background-color: blanchedalmond;
    margin: auto;
  }
  .user {
    height: 90px;
    width: 100%;
    background-color: aqua;
    margin-top: 50px;
  }
  .userimg {
    float: left;
    width: 60px;
    height: 60px;
    background-color: red;
    border-radius: 50%;
  }
  .userimg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .username {
    font-size: 12px;
  }
  .usercontent {
    border: 1px solid red;
    width: 80%;
    height: 100%;
    float: right;
  }
  .users {
    margin-top: 150px;
    height: 100px;
    background-color: aquamarine;
    margin-left: 50px;
  }

  .feed {
    font-family: "微软雅黑";
    width: 720px;
    margin: 8px 0;
    margin: auto;
  }

  .avatar {
    width: 50px;
    float: left;
    margin: 0 8px 0 0;
    box-shadow: 0 0 3px #e0e0e0;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
  }

  .feed .avatar img {
    width: 50px;
    height: 50px;
  }

  .feed .box1 {
    width: 640px;
    float: left;
    background: #f6f6f6;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
  }

  .feed .box1 .current {
    font-size: 22px;
    margin: 8px;
  }

  .feed .box1 .info {
    margin: 0 8px;
  }

  .feed .box1 .info span {
    float: right;
  }

  .feed .box1 .line {
    padding: 8px 0 0 0;
    border-bottom: 1px solid #e0e0e0;
  }

  .feed .box1 .box2 {
    margin: 8px;
    padding: 0 0 8px 0;
    border-bottom: 1px dashed #ccc;
  }

  .feed .box1 .box2_comments {
    width: 560px;
    overflow: hidden;
    float: left;
  }

  .feed .box1 .say {
    margin: 0 0 8px;
  }

  .clear {
    clear: both;
  }

  .feed .box1 .box2_comments .box3 {
    margin: 8px 0;
  }

  .feed .box1 .box2_comments .box3_comments {
    float: left;
    width: 500px;
  }

  .reply_area {
    border: 1px solid #e0e0e0;
    height: 30px;
    line-height: 30px;
    width: 620px;
    margin: 8px;
    color: #666;
    font-size: 12px;
    font-family: "微软雅黑";
    clear: both;
  }
</style>
